<template>
	<div class="article-edit">
		<el-card class="!border-none" shadow="never">
			<el-page-header :content="$route.meta.title" @back="$router.back()" />
		</el-card>
		<el-card class="mt-4 !border-none" shadow="never">
			<el-form ref="formRef" class="ls-form" :model="formData" label-width="125px" :rules="rules">
				<div class="xl:flex">
					<div>
						<el-form-item label="药材名称" prop="name">
							<div class="w-80">
								{{formData.name}}
							</div>
						</el-form-item>
						<!-- <template v-for="(item,index) in formData.contacts" :key="index"> -->

						<el-form-item label="联系方式" prop="contacts" v-for="(item,index) in formData.contacts"
							:key="index">
							<div class="w-80">
								<span>联系人</span><span style="padding-left: 5px;">{{item.name}}</span>
							</div>
							<div class="w-80">
								<span>联系电话</span><span style="padding-left: 5px;">{{item.tel}}</span>
							</div>
						</el-form-item>
					<el-form-item label="库存地" prop="producer">
						<div class="w-80">
							{{formData.producer}}
						</div>
					</el-form-item>
						<!-- <el-form-item label="品种规格" prop="specifications">
							<div class="w-80">
								{{formData.specifications}}
							</div>
						</el-form-item> -->
					<!-- <el-form-item label="药材数量" prop="num">
						<div class="w-80">
							{{formData.num}}
						</div>
					</el-form-item> -->
				<!-- 	<el-form-item label="药材价格" prop="jiage">
						<div class="w-80">
							{{formData.jiage}}
						</div>
					</el-form-item> -->
					<!-- <el-form-item label="药材简介" prop="jjxq">
						<div class="w-80">
							{{formData.jjxq}}
						</div>
					</el-form-item> -->
						<el-form-item label="发布供应时间" prop="fbtime">
							<div class="w-80">
								{{formData.fbtime}}
							</div>
						</el-form-item>
						<el-form-item label="浏览量" prop="fbtime">
							<div class="w-80">
								{{formData.liulan}}
							</div>
						</el-form-item>
						<el-form-item label="封面图片" prop="fming">
							<div class="w-80">
								  <el-image  :src="formData.fming" fit="fill" />
							</div>
						</el-form-item>
				
					</div>
					<!-- <div class="xl:ml-20">
						<el-form-item label="详情" prop="ycxq">
							<div style="width: 300px;" v-html="formData.ycxq"></div>
						</el-form-item>
					</div> -->
					<div class="xl:ml-20">
						<el-form-item label="详细信息" prop="ycxq">
							<div>{{formData.jjxq}}</div>
							
						</el-form-item>
						<el-form-item label="详细图片" prop="ycxq">
							<!-- <div style="width: 300px;" v-html="formData.xqxx"></div> -->
							<image-contain
							style="margin-right: 10px; margin-bottom:10px;"
							   v-for="item in formData.ycxq"
							    :src="item"
							    :width="200"
							    :height="200"
							    :preview-src-list="formData.ycxq"
							    preview-teleported
							    fit="contain"
							/>
						</el-form-item>
					</div>
				</div>
			</el-form>
		</el-card>
	</div>
</template>

<script lang="ts" setup name="articleListsEdit">
	import type { FormInstance } from 'element-plus'
	import { useDictOptions } from '@/hooks/useDictOptions'
	import { supplyDetail, articleEdit, articleAdd, articleCateAll, qiye } from '@/api/article'
	import useMultipleTabs from '@/hooks/useMultipleTabs'
	import { onMounted } from "vue";


	const route = useRoute()
	const router = useRouter()
	const formData = reactive({
		id: '',
		name: '',
		contacts: [],
		fbtime: '',
		fming: '',
		jjxq: '',
		// num: '',
		producer: '',
		sort: 0,
		is_show: 1,
		// specifications: '',
		ycxq: [],
		// jiage:'',
		liulan:0
	})
	// const qiyexinxi = reactive({
	// 	data: ""
	// })

	const { removeTab } = useMultipleTabs()
	const formRef = shallowRef<FormInstance>()
	const rules = reactive({
		title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
		cid: [{ required: true, message: '请选择文章栏目', trigger: 'blur' }]
	})

	const getDetails = async () => {
		const data = await supplyDetail({
			id: route.query.id
		})
		Object.keys(formData).forEach((key) => {
			//@ts-ignore
			formData[key] = data[key]
			// formData.contacts=JSON.parse(formData.contacts)
			// console.log(formData,'formData.contacts');
		})
		formData.contacts = JSON.parse(formData.contacts)
		formData.ycxq = JSON.parse(formData.ycxq)
		// console.log(formData.contacts,'formData.contacts');
	}

	// const { optionsData } = useDictOptions<{
	// 	article_cate : any[]
	// }>({
	// 	article_cate: {
	// 		api: articleCateAll
	// 	}
	// })

	// const handleSave = async () => {
	// 	await formRef.value?.validate()
	// 	if (route.query.id) {
	// 		await articleEdit(formData)
	// 	} else {
	// 		await articleAdd(formData)
	// 	}
	// 	removeTab()
	// 	router.back()
	// }
	// onMounted(() => {
	// 	qiye().then(res => {
	// 		//console.log(res.data);
	// 		qiyexinxi.data = res.data
	// 	})
	// 	// 在这里执行与 onLoad 类似的操作
	// });
	route.query.id && getDetails()
</script>